<template>
    <el-dialog :model-value="dialogFormVisible" :destroy-on-close="true" :title="dialogTitle" width="600px" @close="emits('closeDialog')">
        <el-timeline style="padding-left:50px;">
            <el-timeline-item v-for="(item, index) in auditHistory"
              :timestamp="item.audit_level + '审：' + item.level_name" :type="item.type" :hollow="!item.his_order_id" placement="top">
              <el-card shadow="never" v-if="item.his_order_id">
                <p>审核组：{{ item.his_group_name }}</p>
                <p>审核人：{{ item.his_audit_user }}</p>
                <p>审核时间：{{ formatDates(item.his_createtime) }}</p>
                <p>审核结果：<el-tag :type="item.his_audit_result == 'pass' ? 'success' : 'danger'">{{ item.his_audit_result == 'pass' ? '通过' : '拒绝' }}</el-tag></p>
                <p v-if="item.his_remark">备注：{{ item.his_remark }}</p>
              </el-card>
              <el-card shadow="never" v-else>
                <p>审核组：{{ item.group_name }}</p>
                <!--<p>审核人：{{ item.audit_user }}</p>-->
                <p>审核状态：<el-tag type="warning">等待审核</el-tag></p>
              </el-card>
            </el-timeline-item>
        </el-timeline>
        <el-form ref="dialogFormRef" :model="dialogForm" :rules="rules" v-if="btnType == 'audit'">
            <el-form-item label="提现总金额" :label-width="formLabelWidth">
                <el-tag type="danger">{{ dialogForm.amount }} {{ dialogForm.currency }}</el-tag>
            </el-form-item>
            <el-form-item label="审核结果" :label-width="formLabelWidth" prop="review_status">
                <el-radio-group v-model="dialogForm.review_status">
                    <el-radio key="1" label="1">通过</el-radio>
                    <el-radio key="2" label="2">拒绝</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="审核意见" :label-width="formLabelWidth" prop="review_reason">
                <el-input v-model="dialogForm.review_reason" type="textarea" rows="3" />
            </el-form-item>
            <div v-if="dialogForm.cus_audit_level == auditHistory.length">
            <el-form-item label="付款金额" :label-width="formLabelWidth" prop="send_amount">
                <el-input v-model="dialogForm.send_amount">
                <template #append>已付金额：{{ dialogForm.settled_amount }} {{ dialogForm.currency }}</template>
                </el-input>
            </el-form-item>
            <el-form-item label="* 付款银行" :label-width="formLabelWidth" prop="sys_card_id">
                <el-select v-model="dialogForm.sys_card_id" placeholder="请选择平台付款银行" style="width:100%">
                    <el-option
                        v-for="item in cardSelect"
                        :key="item.id"
                        :label="item.card_name +'/' + item.card_number + '/' + item.bank"
                        :value="item.id"
                        >
                    </el-option>
                </el-select>
            </el-form-item>
            <!--<el-form-item label="付款银行" :label-width="formLabelWidth" prop="send_bank">-->
            <!--    <el-input v-model="dialogForm.send_bank" />-->
            <!--</el-form-item>-->
            <!--<el-form-item label="付款银行账号" :label-width="formLabelWidth" prop="send_card_number">-->
            <!--    <el-input v-model="dialogForm.send_card_number" />-->
            <!--</el-form-item>-->
            <!--<el-form-item label="付款人" :label-width="formLabelWidth" prop="send_card_name">-->
            <!--    <el-input v-model="dialogForm.send_card_name" />-->
            <!--</el-form-item>-->
            <el-form-item label="付款方式" :label-width="formLabelWidth" prop="payment_way">
                <el-input v-model="dialogForm.payment_way" />
            </el-form-item>
            <el-form-item label="付款凭证流水号" :label-width="formLabelWidth" prop="payment_order_no">
                <el-input v-model="dialogForm.payment_order_no" />
            </el-form-item>
            <el-form-item label="支付凭证图片" :label-width="formLabelWidth">
                <el-upload
                  :action="uploadimgUrl"
                  :data="{ project_code: 'pay_service' }"
                  :show-file-list="false"
                  :on-success="handleUploaderImgSuccess"
                  :limit="1"
                  :headers="TOKENT_HEADER"
                  class="avatar-uploader"
                >
                  <img v-if="dialogForm.payment_image" :src="dialogForm.payment_image_show" class="avatar" width="130" height="130" />
                  <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                </el-upload>
            </el-form-item>
          </div>
        </el-form>
        <template #footer>
            <span class="dialog-footer" v-if="btnType == 'audit'">
                <el-button @click="emits('cancel')">取消</el-button>
                <el-button type="primary" @click="submit(dialogForm)" :loading="btnLoading">提交</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
import { ref } from "vue";
import { formatDates } from "@/utils/utils";
import { uploadimgUrl } from "@/api/system/uploadimg";
import { TOKENT_HEADER } from "@/config/api-constant/system";

const dialogFormRef = ref(null);

defineProps({
    dialogFormVisible: {
        type: Boolean,
        default: false
    },
    dialogForm: {
        type: Object,
        default: {
            audit_order_id: "",
            order_no: "",
            review_status: "",
            review_reason: "",
            send_bank: "",
            send_card_number: "",
            send_card_name: "",
            payment_way: "",
            payment_order_no: "",
            payment_image: "",
            payment_image_show: "",
            send_amount: "",
            sys_card_id: ""
        }
    },
    btnLoading: {
        type: Boolean,
        default: false
    },
    dialogTitle: {
        type: String,
        default: ""
    },
    btnType: {type: String, default: ""},
    auditHistory: {type: Array, default: []}
});
const emits = defineEmits(["closeDialog", "cancel", "submitForm", "handleUploaderImgRequest"]);
const handleUploaderImgSuccess = (res) => {
    emits("handleUploaderImgRequest", res, "payment_image_show");
};
const formLabelWidth = "140px";
// 校验
const rules = {
//    order_no: [{ required: true, message: "订单流水号不能为空", trigger: "blur" }],
    review_status: [{ required: true, message: "请选择审核结果", trigger: "blur" }],
    review_reason: [{ required: true, message: "请输入审核意见", trigger: "blur" }],
};
// 提交
const submit = dialogForm => {
    dialogFormRef.value
        .validate()
        .then(async () => {
            try {
                const param = Object.assign({}, {
                    audit_order_id: dialogForm.audit_order_id,
                    order_no: dialogForm.order_no,
                    review_status: dialogForm.review_status,
                    review_reason: dialogForm.review_reason,
                    send_bank: dialogForm.send_bank,
                    send_card_number: dialogForm.send_card_number,
                    send_card_name: dialogForm.send_card_name,
                    payment_way: dialogForm.payment_way,
                    payment_order_no: dialogForm.payment_order_no,
                    payment_image: dialogForm.payment_image,
                    send_amount: dialogForm.send_amount,
                    sys_card_id: dialogForm.sys_card_id
                });
                emits("submitForm", param);
            } catch (error) {
                return false;
            }
        })
        .catch(error => {
            return false;
        });
};
</script>
